<template>
    <div class="box">
        <h2>自定义事件</h2>
        <button @click="clickHandler" @qwer="qwerHandler">按钮</button>

        <hr>

        <Event1 @click="clickHandler" @qwer="qwerHandler"></Event1>

        <hr>

        <Event1 @click.native="clickHandler" @qwer="qwerHandler"></Event1>

        <hr>

        <button @click="clickHandler" @qwer="qwerHandler">不传参</button>
        <button @click="clickHandler('葛晨是南通')" @qwer="qwerHandler">传一个参</button>
        <button @click="clickHandler($event, '葛晨是南通')" @qwer="qwerHandler">传参数和事件对象</button>

        <br>

        <Event1 @qwer="qwerHandler"></Event1>
        <Event1 @qwer="qwerHandler('我爱你')"></Event1>
        <Event1 @qwer="qwerHandler($event,'我爱你')"></Event1>
    </div>
</template>

<script>
//      自定义事件 - 自己定义的事件叫自定义事件
//          原生事件绑定自定义事件没有意义

// 关于参数只需要记一句话: $event在原生事件中是事件对象,在自定义事件中是 $emit() 传的参数
import Event1 from './Event1.vue'
export default {
    name: "EventTest",
    components: { Event1 },
    methods: {
        clickHandler() {
            console.log('触发了click事件');
        },
        qwerHandler(e1,e2) {
            console.log(e1,e2);
        }
    }
}
</script>

<style scoped>

</style>